<template>
    <el-select
        placeholder="请选择"
        v-model="selectValue"
        :disabled="disabled"
        filterable
        collapse-tags
        collapse-tags-tooltip
        :clearable="clearable"
        :filter-method="handleQuerySearch"
        @change="handleQueryChange"
        :multiple="multiple"
        @visible-change="visibleList"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <VabElSelectLoading
        :page="page"
        :loading="loading"
        :hasMore="hasMore"
        @loadMore="handleLoadMore"
      />
    </el-select>
  </template>

<script setup lang="ts">

/**
 * @import
 */
import _ from "lodash";
import { ref } from "vue";
import { getProductSearchSelect } from "~/src/api/dms/product";

/**
 * @props
 */
const props = defineProps({
    value: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: '', // number, name, barcode
    },
    // 使用组织
    userOrgId: {
        type: String,
        default: '',
    },
  //品牌
  brandName:{
    type: Array,
    default: [],
  },
    multiple: {
        type: Boolean,
        default: false
    },
    clearable: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    }

})

/**
 * @var
 */

const proxy: any = getCurrentInstance()?.proxy

const page = ref(1);
const loading = ref(false);
const hasMore = ref(true);

const selectValue = ref<any>();
const sreachValue = ref<any>('')
const selectOptions = ref<any[]>([]);


const emit = defineEmits(['LazyChange'])

/**
 * 加载数据列表
 */
const loadDataList = async () => {

    if (!props.userOrgId) {
        proxy.$Message('请选择使用组织后，再进行操作！', 'warning')
        return
    }

    try {
        loading.value = true;

        // 参数
        let data = {
            page: page.value,
            limit: 50,
            filter: {
                name: (props.type == '' || props.type == 'name') ? sreachValue.value : '', // 物料名称
                number: props.type == 'number' ? sreachValue.value : '', // 物料编码
                barcode: props.type == 'barcode' ? sreachValue.value : '', // 条码
                use_org_id: props.userOrgId || '', // 使用组织
              assistant_id: props.brandName || [],//品牌
            },
        }

        // api
        const res = await getProductSearchSelect({ ...data })

        // 遍历获取
        const list = res.data.list.map((item: any) => {
            // 复合查询
            if (!props.type) return { value: item.number, label: `${item.number}-${item.name}` }
            if (props.type == 'name') return { value: item.name, label: item.name }
            if (props.type == 'number') return { value: item.number, label: item.number }
          if (props.type == 'barcode') return { value: item.barcode, label: item.barcode }
        }) || []

        if (page.value == 1) selectOptions.value = [];

        selectOptions.value.push(...list);

        hasMore.value = selectOptions.value.length < res.data.count
    } catch (err) {
        console.error(err);
    } finally {
        loading.value = false;
    }
};

/**
 * 加载更多数据
 */
const handleLoadMore = async (value:any) => {
  page.value = value
  loadDataList();
};

/**
 * 模糊搜索
 */
const handleQuerySearch = _.throttle((value: any) => {
    // 去空格 大小写    sreachValue.value = value?.trim().toLowerCase().replace(/\s+/g, '\n')  空格转化为换行
  sreachValue.value = value?.trim().toLowerCase()
  page.value = 1
    // 加载数据
    loadDataList()
}, 500)

/**
 * change
 */
const handleQueryChange = (value: any) => {
    emit('LazyChange', value)
}
const visibleList = (va:any)=>{
  if (va){
    loadDataList()
  }
}
</script>

<style lang="scss" scoped></style>
